<template>
  <div>
    <el-card>
      <h2>
        查询条件
      </h2>
      <el-row style="margin-top: 30px;">
        <el-form inline v-model="searchForm">
          <el-form-item label="图书种类：" prop="cate" label-width="100px">
            <el-select v-model="searchForm.selected_cate" clearable placeholder="请选择">
              <el-option v-for="item in bookCategory" :key="item.id" :label="item.cateName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="图书名称：" prop="book_name" label-width="100px">
            <el-input v-model="searchForm.book_name" placeholder="书名关键字" clearable></el-input>
          </el-form-item>

          <el-form-item label="作者：" prop="author" label-width="80px">
            <el-input v-model="searchForm.author" placeholder="作者" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
        <h2>
          图书信息
        </h2>
        <el-table :data="bookList" stripe style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="book_name" label="图书名" width="200" align="center">
          </el-table-column>

          <el-table-column prop="authors" label="作者" width="80" align="center">
          </el-table-column>

          <el-table-column prop="category" label="分类" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.row.category.cateName }}
            </template>
          </el-table-column>
 
          <el-table-column prop="publisher" label="出版社" width="150" align="center">
          </el-table-column>

          <el-table-column prop="isbn" label="ISBN" width="150" align="center">
          </el-table-column>

          <el-table-column prop="publish_date" label="出版日期" :formatter="dateFormat" align="center">
          </el-table-column>

          <el-table-column prop="stock" label="库存" align="center">
          </el-table-column>

          <el-table-column label="是否可借阅" align="center">
            <template slot-scope="scope">
              <a v-if="scope.row.loanable === 0">
                否
              </a>
              <a v-else>
                是
              </a>
            </template>
          </el-table-column>

          <el-table-column label="位置" prop="location" align="center">

          </el-table-column>

          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">

              <el-button v-if="scope.row.stock === 0" type="primary" size="mini" disabled>借阅</el-button>
              <el-button v-else type="primary" size="mini" @click="handleClickLoanBook(scope.row)">借阅</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px ;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageInfo.current_page" :page-sizes="[5, 10, 20, 50]" :page-size="pageInfo.page_size"
          layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
        </el-pagination>

        <el-dialog title="借阅" :visible.sync="loanBookDialogVisible" width="25%" :close-on-click-modal="false">
          <el-form align="left" :model="loanBookForm" label-width="120px">
            <el-form-item label="图书名：">
              <el-input v-model="loanBookForm.book_name" disabled></el-input>
            </el-form-item>

            <el-form-item label="ISBN：">
              <el-input v-model="loanBookForm.isbn" disabled></el-input>
            </el-form-item>

            <el-form-item label="借阅时长：">
              <el-select v-model="loanBookForm.loan_days" placeholder="请选择">
                <el-option label="7天" :value="7" />
                <el-option label="15天" :value="15" />
                <el-option label="30天" :value="30" />
                <el-option label="60天" :value="60" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleClickSubmitLoanBook">提交</el-button>
              <el-button type="success" @click="handleClickCancelSubmitLoanBook">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from "moment";
import request from '@/utils/request'
import { Message } from 'element-ui';
import getInfo from '@/api/user'

export default {
  data() {
    return {
      loanBookDialogVisible: false,
      pageInfo: {
        current_page: 1,
        page_size: 5,
        total: 3
      },
      searchForm: {
        selected_cate: '',
        book_name: '',
        author: ''
      },
      bookCategory: [
        { id: '1', cateName: '编程' },
        { id: '2', cateName: '文学' },
        { id: '3', cateName: '历史' },
        { id: '4', cateName: '法律' }
      ],

      bookList: [
        {
          id: '111',
          book_name: 'C++程序设计（第三版）',
          category: { id: '1', cateName: '编程' },
          authors: '谭浩强',
          publisher: '清华大学出版社', // 出版社
          isbn: '321598723895',
          publish_date: '2013-08-06T07:55:28.000+00:00', // 出版日期
          stock: 3, // 库存
          loanable: 1, // 是否可借阅
          location: '阅览室2-F2D4C11',
          img_url: ''
        },
        {
          id: '222',
          book_name: 'Java编程思想（第四版）',
          category: { id: '2', cateName: '文学' },
          authors: '王家卫',
          publisher: '机械工业出版社', // 出版社
          isbn: '321598723895',
          publish_date: '2008-01-19T07:55:28.000+00:00', // 出版日期
          stock: 0, // 库存
          loanable: 0, // 是否可借阅
          location: '阅览室1-F1A4C9',
          img_url: ''
        },
        {
          id: '333',
          book_name: '繁花',
          category: { id: '1', cateName: '编程' },
          authors: 'Bruce Eckel',
          publisher: '上海文艺出版社', // 出版社
          isbn: '9787532148004',
          location: '阅览室2-F3A4C9',
          publish_date: '2023-10-09T07:55:28.000+00:00', // 出版日期
          stock: 1, // 库存
          loanable: 1, // 是否可借阅
          img_url: ''
        },

      ],
      loanBookForm: {
        id: '',
        book_name: '',
        isbn: '',
        loan_days: 7
      }
    }
  },
  mounted() {
    this.loadBookList()
  },
  methods: {
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },

    loadBookList() {
      let queryParm = {
        current_page: this.pageInfo.current_page,
        page_size: this.pageInfo.page_size
      }
      request({
        url: 'books',
        method: 'get',
        params: queryParm
      }).then((resp) => {
        this.bookList = resp.data
        this.pageInfo.total = resp.total
      }).catch((resp) => {
        this.$message({
          type: 'error',
          message: resp.message
        })
      })
    },


    // 点击查询按钮
    handleSearch() {
      let queryParm = {
        category_id: this.searchForm.selected_cate,
        book_name: this.searchForm.book_name,
        author: this.searchForm.author,
        current_page: this.pageInfo.current_page,
        page_size: this.pageInfo.page_size
      };
      request({
        url: 'books',
        method: 'get',
        params: queryParm
      }).then((resp) => {
        this.bookList = resp.data
        this.pageInfo.total = resp.total
      }).catch((resp) => {
        this.$message({
          type: 'error',
          message: resp.message
        })
      })
    },
    handleCurrentChange(val){
      this.pageInfo.current_page = val
      this.loadBookList()
    },
    handleSizeChange(val){
      this.pageInfo.page_size = val
      this.loadBookList()
    },
    // 点击借阅
    handleClickLoanBook(row) {
      
      
      this.loanBookDialogVisible = true;
      this.loanBookForm.id = row.id;
      this.loanBookForm.book_name = row.book_name;
      this.loanBookForm.isbn = row.isbn;

    },
    handleClickSubmitLoanBook() {
      request({
        url: 'loans/book',
        method: 'post',
        data: this.loanBookForm
      }).then((resp) => {
        this.loadBookList()
        this.loanBookDialogVisible = false;
      }).catch((resp) => {
        this.$message({
          type: 'error',
          message: resp.message
        })
      })
    },
    handleClickCancelSubmitLoanBook() {
      this.loanBookDialogVisible = false;
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
